<template>
  <div>
    <h1>跨域</h1>
    <p>安装axios异步请求的模块</p>
    <p>cnpm install axios vue-axios -D</p>
    <hr>
    <p>修改config/index.js</p>
    <p>
      proxyTable: { <br>
      '/api': { <br>
      target: 'http://api.douban.com/', <br>
      changeOrigin: true, <br>
      pathRewrite: { <br>
      '^/api': '/' <br>
      } <br>
      } <br>
      },
    </p>
    <hr>
    <p>使用axios获取数据</p>
    <p>
      getData(){ <br>
      this.axios({<br>
      url: '/api/v2/movie/in_theaters',<br>
      method: 'get'<br>
      }).then((res) => {<br>
      this.moveList = res.data.subjects;<br>
      console.log(res.data)<br>
      })<br>
      }<br>
      }<br>
    </p>

    <button @click="getData()">获取数据</button>

    <div class="row">
      <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3" v-for="m in moveList">
        <div class="thumbnail">
          <img class="poster" :src="m.images.large" alt="">
          <div class="caption">
            <h4>{{m.title}}</h4>
          </div>
        </div>
      </div>
    </div>

  </div>

</template>

<script>
  export default {
    data(){
      return {
        moveList: []
      }
    }
  /*  methods: {
      getData(){
        this.axios({
          url: '/api/v2/movie/in_theaters',
          method: 'get'
//          请求头写不写看情况
          /!*, headers:{
//              返回的数据类型   返回的数据格式
              'Comtent-Type':'application/jsom'
          }*!/
        }).then((res) => {
          this.moveList = res.data.subjects;
          console.log(res.data)
        })
      }
    }*/

  }
</script>
<style lang="css">
  .poster {
    max-height: 206px;
  }
</style>
/*mounted(){
this.axios({
url: '/api/v2/movie/subject/1764796',
method: 'get'
}).then((res) => {
console.log(res.data)
})
},*/
